<template>
    <div class="index_page">
        <ul class="gift_send_pro">
            <li v-for="item in step_list" v-bind:class="{ active: item.is_active==true, current_active: item.value==now_step }">
                <img :src="item.is_active==true?item.active_img:item.normal_img">
                <p v-text="item.name"></p>
            </li>
        </ul>
        <div v-show='now_step==2'>
            <div class="gift_share_wrap">
                <div class="gift_share_common">
                    <div class="gift_share">
                        <div class="share_top">
                            <img :src="order_data.user_image | renderImg">
                            <span v-text="order_data.real_name"></span>
                        </div>
                    </div>
                    <div class="gift_content" :style="{'background-image': 'url('+ order_data.resource_image +')'}">
                        <div v-text="order_data.resource_name"></div>
                    </div>
                    <div class="gift_words">
                        <div class="left_wrap" style="width: 11rem">
                            <p>赠言：</p>
                            <p v-text="order_data.words"></p>
                        </div>
                        <div class="right_wrap">
                            <div style="padding-top: 1rem" id="code">
                            </div>
                            <p>扫码领取礼物</p>
                        </div>
                    </div>
                </div>
                <div class="gift_share_add">
                    <p>
                        1、点击右上角分享，将礼物分享给好友。
                    </p>
                    <p>
                        2、长按海报，发送海报图片给好友。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/api'
import shareApi from '@/tools/mp_sdk'
import wx from 'weixin-js-sdk'
export default {
    name: 'giftShare',
    data() {
        return {
            default_user_img: require('assets/images/default_user.jpeg'),
            default_img: require('assets/images/watchs.jpg'),
            now_step: 2,
            order_data: {},
            step_list: [
                {
                    name: '1.填写信息',
                    value: 0,
                    is_active: true,
                    active_img: require('assets/images/icon_write.png'),
                    normal_img: require('assets/images/icon_write.png')
                },
                {
                    name: '2.确认信息',
                    value: 1,
                    is_active: true,
                    active_img: require('assets/images/icon_confirms.png'),
                    normal_img: require('assets/images/icon_confirm.png')
                },
                {
                    name: '3.赠送礼物',
                    value: 2,
                    is_active: true,
                    active_img: require('assets/images/icon_givings.png'),
                    normal_img: require('assets/images/icon_giving.png')
                }
            ]
        }
    },
    methods: {
        postStepChange: function (val) {
            var _self = this;
            _self.now_step += 1;
            _self.step_list[val + 1].is_active = true;
        },
        getOrderInfo: function () {
            let order_params = {
                functioncode: 'give_gifts_info',
                gift_id: this.$route.params.order_id
            }
            var _self = this;
            api.get(order_params).then((res) => {
                if (res.data.returncode == '000000') {
                    _self.order_data = res.data.record;
                    _self.order_data.resource_image = _self.imgCheck(_self.order_data.resource_image);

                    shareApi.initConfig({
                        mpID: _self.mp_id,
                        userID: _self.user_id,
                        shareData: {
                            shareTitle:  _self.order_data.resource_name,
                            shareContent: '哒哒哒，我送了一个礼物给你，快点开领取吧~' ,
                            shareImgUrl: _self.order_data.resource_image
                        }
                    });

                    if (res.data.record.pay_state == 0) {
                        this.$toast('该订单尚未支付，请支付后再来分享~');
                        let pay_url = '';
                        if (_self.wx_pay_way == 'special_self' || _self.wx_pay_way == 'special_sub') {
                            pay_url = _self.current_host + "/mp/order/pay/" + this.$route.params.order_id + '?from=mallsend';
                        } else {//统一支付逻辑
                            pay_url = _self.unified_pay_host + "/mp/common/wxpay/order/" + this.$route.params.order_id + '?from=mallsend';
                        }
                        window.location.replace(pay_url);
                        return;
                    } else {
                        require('../tools/jquery.min.js');
                        require('../tools/jquery.qrcode.min.js');
                        this.useQrcode();
                        return;
                    }

                }

            });

        },
        imgCheck: function (value) {
            if (value.length > 50) {
                return value;
            } else {
                return this.img_url + value;
            }
        },
        useQrcode: function () {
            $("#code").qrcode({
                text: 'https://' + this.current_host + '/gift/receive/' + this.$route.params.order_id,
                width: 80,
                height: 80
            });
        }

    },
    computed: {

    },
    mounted: function () {
        this.getOrderInfo();
    },
}
</script>

<style scoped>
body {
    background: #f2f2f2;
    margin: 0;
}
</style>
